<template>
    <div class="common-layout">
        <el-container>
          <el-header>
            <el-button type="primary" size="small" :icon="Plus" @click="handleAdd">新增</el-button>
          </el-header>
          <el-main>
            <el-table
                :data="menuList"
                style="width: 100%; margin-bottom: 20px"
                row-key="id"
                default-expand-all
            >
            <el-table-column prop="title" label="分类名称" width="360" />
            <el-table-column prop="name" label="分类编码" />
            <el-table-column prop="icon" label="图标" align="center" width="100">
                <template #default="scope">
                    <SvgIcon :name="scope.row.icon" />
                </template>
            </el-table-column>
            <el-table-column prop="weigh" label="排序" width="60"></el-table-column>
            <el-table-column prop="status" label="状态" :formatter="statusFormat" width="80"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                  <el-button size="small" v-if="scope.row.id==='cate'"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                  >修改</el-button>
        
                  <el-button
                    size="small"
                    icon="el-icon-plus"
                    @click="handleAdd(scope.row)"
                  >新增</el-button>
        
                  <el-button  v-if="scope.row.remark!=='cate'"
                    size="small"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
        <!-- 添加或修改分类对话框 -->
    <el-dialog :title="title" v-model="open" width="900px" append-to-body :close-on-click-modal="false">
        <el-form ref="formtu" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="上级分类">
                <el-cascader
					:options="menuOptions"
					:props="{ label: 'title',value: 'id',checkStrictly: true,emitPath: false }"
					placeholder="请选择上级分类"
					clearable
					class="w100"
					v-model="form.pid"
				>
					<template #default="{ node, data }">
						<span>{{ data.title }}</span>
						<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
					</template>
				</el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item  label="分类图标">
                <IconSelector placeholder="点击选择图标" style="width: 100%;" v-model="form.icon" type="all" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分类名称" prop="title">
                <el-input v-model="form.title" placeholder="请输入分类名称" />
              </el-form-item>
            </el-col>

            <el-col :span="12" >
              <el-form-item label="分类编码" prop="name">
                <el-input v-model="form.name" placeholder="请输入分类编码" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="显示排序" prop="weigh">
                <el-input-number v-model="form.weigh" controls-position="right" :min="0" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="显示状态">
                <el-radio-group v-model="form.isHide">
                  <el-radio :label="0">显示</el-radio>
                  <el-radio :label="1">隐藏</el-radio>
                </el-radio-group>
              </el-form-item>
              
            </el-col>

  
          </el-row> 
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script lang="ts">
import {ref, reactive, toRefs, onMounted, getCurrentInstance} from "vue"
import {Plus} from '@element-plus/icons-vue'
import {handleTree,selectDictLabel } from "/@/utils/ruoyi"
import {listCateMenu,updateMenu,addMenu,getCategory,delMenu,getDicts} from '/@/api/linkoo/category'
import XEUtils from 'xe-utils'
import IconSelector from '/@/components/iconSelector/index.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    components:{IconSelector},
    setup() {
        let formtu = ref(null)
        let state =reactive({
            menuList:[],
            // 查询参数
            queryParams: {
                menuName: undefined,
                visible: undefined
            },
            // 弹出层标题
            title: "",
            visibleOptions: [],
            // 分类状态数据字典
            statusOptions: [],
            //模型选项
            modelOptions:[],
            // 遮罩层
            loading: true,
            // 是否显示弹出层
            open: false,
            // 表单参数
            form: { "id": 0  ,
              "pid": 0  ,
              "menuType": "0",
              "title": "",
              "name": "",
              "component": "",
              "isLink": 0,
              "menuSort": 0,
              "path": "",
              "redirect": "",
              "icon": "",
              "roles": [],
              "isHide": 0,
              "isKeepAlive": 0,
              "isAffix": 0,
              "weigh": null,
              "linkUrl": "",
              "isIframe": 0},
            menuOptions:[],
          moduleTypeOptions:[]
        })
      const {proxy} = getCurrentInstance() as any;
        onMounted(()=>{
            getDicts("sys_show_hide",'').then(response => {
                state.visibleOptions = response.data;
            });
            getDicts("sys_normal_disable",'').then(response => {
                state.statusOptions = response.data;
            });
            getDicts("menu_module_type",'').then(response => {
                state.moduleTypeOptions = response.data;
            });
            getList()

        })
        const getList=()=>{
            listCateMenu(state.queryParams).then(response => {
                state.menuList = handleTree(response.data.list, "id","pid","children",0);
            });
        }
        // 新增按钮
        const handleAdd=(row:any)=>{
            reset();
            getTreeselect();
            if (row != null) {
                state.form.pid = row.id;
            }
            state.open = true;
            state.title = "添加分类";
        }
        // 表单重置
        const reset=()=> {
            state.form = {
              "id": 0  ,
              "pid": 0  ,
              "menuType": "0",
              "title": "",
              "name": "",
              "component": "",
              "isLink": 0,
              "menuSort": 0,
              "path": "",
              "redirect": "",
              "icon": "",
              "roles": [],
              "isHide": 0,
              "isKeepAlive": 0,
              "isAffix": 0,
              "weigh": null,
              "linkUrl": "",
              "isIframe": 0
            };
        }
        /** 查询分类下拉树结构 */
        const getTreeselect=()=>{
          const menu = { id: 0, title: '主类目', 'children':[]};
          menu.children = handleTree(state.menuList, "id","pid","children",0);
          state.menuOptions.push(menu);
        }
        const statusFormat = (row, column)=> {
            if (row.menuType == "2") {
                return "";
            }
            return selectDictLabel(state.statusOptions.values, row.status);
        }
        // 取消按钮
        const cancel=()=> {
            state.open = false;
            reset();
        }
        // 提交
        const submitForm=() =>{
            formtu.value.validate(valid => {
                if (valid) {
                if (state.form.id != 0) {
                    updateMenu(state.form).then(response => {
                    if (response.code === 0) {
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        state.open = false;
                        getList();
                    } else {
                        ElMessage({
                            type: 'error',
                            message: response.msg,
                        })
                    }
                    });
                } else {
                    state.form.path=state.form.name
                  addMenu(state.form).then(response => {
                    if (response.code === 0) {
                        ElMessage({
                            type: 'success',
                            message: '新增成功',
                        })
                        state.open = false;
                        getList();
                    } else {
                        ElMessage({
                            type: 'error',
                            message: response.msg,
                        })
                    }
                    });
                }
                }
            });
        }
        /** 修改按钮操作 */
        const handleUpdate=(row:any)=>{
          getTreeselect();
        getCategory(row.id).then(response => {
          state.form = response.data.rule
            state.open = true;
            state.title = "修改分类";
        });
        }
        const handleDelete=(row:any) =>{
          ElMessageBox.confirm(`此操作将永久删除菜单：“${row.title}”, 是否继续?`, '提示', {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
          })
              .then(() => {
                delMenu(row.id).then(()=>{
                  ElMessage.success('删除成功');
                  getList();
                })
              })
              .catch(() => {});
        }
        return{
            formtu,
            Plus,
            ...toRefs(state),
            getList,
            handleAdd,
            reset,
            defaultProps : {
                children: 'children',
                label: 'title',
            },
            statusFormat,
            // 表单校验
            rules: {
                menuName: [
                { required: true, message: "分类名称不能为空", trigger: "blur" }
                ],
                name: [
                { required: true, message: "分类编码称不能为空", trigger: "blur" }
                ],
            },
            cancel,
            submitForm,
            handleUpdate,
            handleDelete
        }
    }
}
</script>

<style scoped>
.el-header{
        padding: 0;
        height: 40px;
    }
    .el-main{
        border-radius: 5px;
        height: 100vh;
        padding: 0;
    }

</style>